/*
 * @Author: silas 
 * @Date: 2021-04-28 16:02:35 
 * @Last Modified by: silas
 * @Last Modified time: 2021-05-21 16:00:03
 */
<template>
    <div class="income-forecast">
        <div class="contentTopTitle">
            <div class="title">人工收入跟踪日报</div>
        </div>
        <div class="operation">
            <el-form :inline="true" class="formList">
                <el-form-item label="选择区域">
                    <dx-cascader :area_id.sync="form.areaId" />
                </el-form-item>
                <el-form-item label="账期" label-width="80px">
                    <el-date-picker
                        v-model="form.accMonth"
                        type="month"
                        placeholder="选择月"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handle_search()"
                        >查询</el-button
                    >
                    <el-button
                        size="mini"
                        type="orange"
                        @click="handle_export()"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
            <p class="g-unit">单位: 元</p>
            <div class="tableBox" style="margin-top: 0">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    height="65vh"
                    border
                    stripe
                    ref="table"
                >
                    <el-table-column width="80" prop="acctMonth" label="收入账期" />
                    <el-table-column width="100" prop="acctDate" label="录入日期" />
                    <el-table-column width="130" prop="importCompany" label="录入人员所在分公司" />
                    <el-table-column width="100" prop="importName" label="录入人员姓名" />
                    <el-table-column width="130" prop="incomeSource" label="收入来源大类" />
                    <el-table-column width="140" prop="incomeSubSource" label="收入来源子类" />
                    <el-table-column width="100" prop="imcomeSourceId" label="收入来源编码" show-overflow-tooltip />
                    <el-table-column min-width="110" prop="imcomeSourceName" label="收入来源名称" show-overflow-tooltip />
                    <el-table-column width="100" prop="importRespCompany" label="录入责任单位" />
                    <el-table-column min-width="110" prop="subjectId" label="科目编码" />
                    <el-table-column width="120" prop="subjectName" label="科目名称" show-overflow-tooltip />
                    <el-table-column min-width="120" prop="aftTaxAmt" label="税后金额" />
                    <el-table-column min-width="120" prop="latnName" label="本地网" />
                    <el-table-column min-width="120" prop="areaName" label="县分" />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { createSpanTrend } from "@/utils/mixin.js";
import prefixAPI from "@/api/prefixAPI";
const exportUrl = prefixAPI.pack;
export default {
    data() {
        return {
            form: {
                accMonth: "",
            },
            tableData: [],
            tableLoading: false,
        };
    },
    mounted() {
        //获取到城市信息
        this.initData();
    },
    created() {
        // this.form.accMonth = this.moment().format('YYYYMM');
        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;
    },
    methods: {
        async initData() {
            var that = this;

            that.form.accMonth = await that.getMonth();
            that.getData();
        },
        getMonth() {
            return new Promise((resolve) => {
                $budgetAPI.getHumanMaxMonth({}, (res) => {
                    if (res && res.code == 0) {
                        resolve(res.content);
                    }
                });
            });
        },
        getData() {
            var that = this;

            that.tableData = [];
            that.tableLoading = true;
            $budgetAPI.getHumanData(
                {
                    areaId: that.form.areaId,
                    acctMonth: that.form.accMonth,
                },
                (res) => {
                    if (res && res.code == 0) {
                        that.tableData = res.content;
                    }
                    that.tableLoading = false;
                }
            );
        },
        handle_search() {
            this.getData();
        },
        handle_export() {
            var month = this.form.accMonth,
                areaId = this.form.areaId,
                token = getCookie("token");

            window.open(`${exportUrl}/artificalIncomeTrack/exportDataList?areaId=${areaId}&acctMonth=${month}&token=${token}`, "_self");
        }
    },
};
</script>
<style lang="scss" scoped>
  .tableBox {
      margin-top: 20px;
  }
</style>
